<template>
  <view class="hospital-item">
    <view class="left-box">
      <view class="cover-box" @click="linkToDetail()">
        <img :src="baseUrl + itemData.img" alt="" />
      </view>
    </view>
    <view class="right-box">
      <view class="hospital-info">
        <span class="hospital-name" @click="linkToDetail()">{{
          itemData.hospital_name
        }}</span>
        <view class="hospital-type-box" @click="linkToDetail()">
          <view class="hospital-grade">
            {{ itemData.hospital_grade }}
          </view>
          <view class="hospital-property" @click="linkToDetail()">
            {{ itemData.hospital_property }}
          </view>
        </view>
        <view class="hospital-phone">
          {{ itemData.hospital_phone }}
        </view>
        <view class="hospital-distance-box">
          <i class="iconfont icon-locationfill"></i>
          <span class="distance">距离您 {{ itemData.hospital_score }}km</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // baseUrl:"http://172.17.145.161:3000/public/img/",
      baseUrl: "http://1.15.189.19:3000/public/img/",
    };
  },

  props: {
    itemData: {
      require: true,
    },
  },

  components: {},

  methods: {
    linkToDetail() {
      let url = "/pages/SearchHospital/HospitalDetail/index?id=" + this.itemData.id;
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.hospital-item {
  padding: 30rpx;
  background: #fff;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  .left-box {
    .cover-box {
      height: 150rpx;
      width: 150rpx;
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
  }
  .right-box {
    margin-left: 40rpx;
    .hospital-info {
      .hospital-name {
        font-size: 28rpx;
      }
      .hospital-type-box {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        .hospital-grade {
          font-size: 24rpx;
          color: #fff;
          background: $themeColor2-lite;
          padding: 5rpx 15rpx;
          border-radius: 10rpx;
        }
        .hospital-property {
          color: #666;
          margin-left: 20rpx;
          font-size: 26rpx;
        }
      }
      .hospital-phone {
        margin-top: 10rpx;
        color: #666;
        font-size: 26rpx;
      }
      .hospital-distance-box {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        i{
          color:#666
        }
        .distance {
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>